new Vue({
  el: '#z_refresh',
  data: {
    animeList: [],
    topList: [],
    week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  },
  methods: {
    readFile() {
      this.$http.get('/moongoDB/animes').then(response => {
        let res = response.body;
        let animeList = [];

        if (res) {
          // 遍历周 
          this.week.map(arr => {
            animeList.push(res.filter(item => item.updateDate.indexOf(arr) != -1).slice(0, 16));
          })
          this.animeList = animeList;
          // 排行
          this.topList = res.sort(valueSortBy("zValue", "title")).reverse().slice(0, 10);

        }
      }, response => {
        console.log('请求数据失败！');
      });
    },



    toAnimeInfo(id) {
      window.open(`/animeInfo?id=${id}`, '_blank')
    },
    toAnime(){
      window.open(`/anime`, '_blank')
    }
  },

  created() {
    $('#z_refresh .animeUl').html(`
  <li v-for="item in animeList">
    <a v-for="arr in item" :href="'/animeInfo?id=' + arr.id" target="_blank">
      <img :src="arr.imgSrc" alt="">
        <span :title="arr.title">{{arr.title}}</span>
    </a>
  </li>`);

    $('#z_refresh .topUl').html(`
  <li v-for="(item, index) in topList" :key="index" @click="toAnimeInfo(item.id)">
    <span class="topUl_no">{{ index + 1 }}</span>
    <span class="topUl_title" :title="item.title">{{ item.title }}</span>
    <span class="topUl_hua">更新至第{{ item.episodes.length }}话</span>
  </li>`);
    this.readFile();
  },
  mounted() {

  },
  updated() {
    /*更新页面的按钮*/
    let $dateLi = $("#z_refresh .dateUl li");
    let $anime_W = $("#z_refresh .animeUl li").width();
    let week = new Date().getDay();

    week == 0 ? 7 : week;

    $dateLi.each(function (index, ele) {
      let $that = $(this);
      let $index = index;

      $that.click(function () {
        let $animeUl = $("#z_refresh .animeUl");
        let $move = $index * $anime_W;

        setTimeout(() => {
          $animeUl.stop().animate({
            left: -$move
          }, 500, 'swing');
        }, 100);

        $that.siblings().removeClass("active");
        $that.addClass("active");
      });
    });

    $dateLi.eq(week - 1).click();
  }
});